<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <input id="name" placeholder="请输入学生姓名" />
        <input id="sex" placeholder="请输入学生性别" />
        <input id="classId" type="number" placeholder="请输入学生班级ID" />
        <input id="age" placeholder="请输入学生年龄" />
        <button onclick="insert()">插入学生信息</button>
    </div>
    <div>
        <input id="searchName"  placeholder="请输入模糊查询学生姓名" />
        <input id="age1" placeholder="根据年龄查询" />
        <button onclick="seohui()">查询</button>
    </div>
    <div>
        <div style="display: flex;flex-direction: row;">
            <div style="width: 100px;" class="yi">ID</div>
            <div style="width: 100px;" class="yi">姓名</div>
            <div style="width: 100px;" class="yi">性别</div>
            <div style="width: 100px;" class="yi">班级ID</div>
            <div style="width: 100px;" class="yi">年龄</div>
        </div>
        <div th:each="item :${cc}" style="display: flex;flex-direction: row;">
            <div style="width: 100px;" th:text="${item.id}"></div>
            <input style="width: 100px;" th:value="${item.name}" th:id="${item.id}"></input>
            <div style="width: 100px;" th:text="${item.sex}"></div>
            <div style="width: 100px;" th:text="${item.classId}"></div>
            <div style="width: 100px;" th:text="${item.age}"></div>
            <button th:onclick="|updates(${item.id})|">更新</button>
            <button th:onclick="|deletes(${item.id})|">删除</button>
        </div>
    </div>
</div>
<script>
    function deletes(id) {
        axios
            .get('http://localhost:8080/deleteJpa?id=' + id)
            .then(response => {
                alert(response.data)
                //删除完成后刷新列表
                window.location.reload()
            })
    }
    function updates(id) {
        axios
            .get('http://localhost:8080/updateJpa?id=' + id+'&name='+document.getElementById(id).value)
            .then(response => {
                alert(response.data)
                //更新完成后刷新列表
                this.getList()
            })
    }
    function insert(){
        var name= document.getElementById("name").value;
        var sex= document.getElementById("sex").value;
        var classId= document.getElementById("classId").value;
        var age= document.getElementById("age").value;
        axios
            .get('http://localhost:8080/insertJpa?name='+name+'&sex='+sex+'&classId='+classId+'&age='+age)
            .then(response => {
                alert(response.data)
                //更新完成后刷新列表
                window.location.reload()
            })
    }
    function seohui(){
        var searchName= document.getElementById("searchName").value;
        var age= document.getElementById("age1").value;
        if (age==''){
            age =0;
        }
        window.location.href="http://localhost:8080/toLogninPage22?name="+searchName+'&age='+age;
    }
</script>
</body>
</html>